<template>
	<view style="width: 100%;min-height: 100vh;background-color: rgb(250,250,250)">
		<view class="fabucontent">
			<textarea value="" v-model="content" placeholder="介绍说明" style="width: 100%;background-color: rgb(255,255,255);padding: 10px 10px;border-radius: 20px;width: 95%;" />

			<view class="updata">
				<view class="" style="display: flex;justify-content: flex-start;">
					<view class="" style="width: 100px;height: 100px;display: inline-block;" v-for="(a,index) in img">
						<image :src="a" mode="" style="width: 100px;height: 100px;"></image>
					</view>
					<view class="upimg" @click="change_Img" style="width: 100px;height: 100px;background-color: rgb(255,255,255);border-radius: 10px;margin-top: 5px;">
						<view class="twofabuimages">
							<view class="one">
									<image src="../../static/img/img.png" mode="" style="width: 30px;height: 30px;z-index: 10;"></image>
									<text  style="color: rgb(216,216,216);font-size: 13px;z-index: 11;">照片</text>
							</view>
						</view>
					</view>
					
				</view>
				<view class="">
					<view class="videos" style="text-align: left;">
						<!-- 视频 -->
						<video v-show="video != ''" :src="video" controls="controls" x5-playsinline="" playsinline="true" webkit-playsinline="true"
						 x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen="" x5-video-orientation="portraint"
						 style="width: 200px;margin-top: 10px;margin-left: 5px;
						height: 105px;"></video>
					</view>
					
					<view @click="tovideo" class="upvideo" style="width: 100px;height: 100px;background-color: rgb(255,255,255);border-radius: 10px;margin-top: 5px;">
						<view class="twofabuimages">
							<view class="one">
								<image src="../../static/img/paishe.png" mode="" style="width: 30px;height: 30px;"></image>
								<text style="color: rgb(216,216,216);font-size: 13px;">视频</text>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			
			
			<view class="" style="display: flex;justify-content: space-between;margin-top: 10px;align-items: center;">
				<view class="">
					是否收费
				</view>
				<view class="" @click="shoufei(true)">
					<image v-if="ishow == false" src="../../static/wei.png" mode="widthFix" style="width: 20px;height: 20px;"></image>
					<image v-else src="../../static/zhong.png" mode="" mode="widthFix" style="width: 20px;height: 20px;"></image>
				</view>
			</view>
			<view class="" style="display: flex;flex-direction: row;align-items: center;background-color: rgb(255,255,255);width: 22%;justify-content: center;border-radius: 30px;position: absolute;right: 30px;" v-if="ishow">
				<input type="text" v-model="money" style="width: 30px" />元
			</view>
		</view>
		<view class="btnfabu" @click="fabu">
			发布
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ishow:false,
				action: 'http://www.example.com/upload',
				fileList: [
					{
						url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
					}
				],
				content:'',
				money:'',
				is_sf:'',
				video:'',
				img:[]
			}
		},
		methods: {
			tovideo(){
				let token = uni.getStorageSync("token")
				   uni.chooseVideo({
						count:1,
				    success:(res)=> {
							// console.log(res)
							console.log(res.tempFilePath)
							let tempFilePaths = res.tempFilePath;
				      uni.uploadFile({
				        url: this.G_base + '/api/upload/image',
				        filePath: tempFilePaths,
				        name: 'file' ,
				        method:'post',
				        header: {
				         'Authori-zation': 'Bearer ' +token
				       },
				        success:(e)=> {
									let data = e.data;
									let s = JSON.parse(data);
									let tuimg = s.data.url
									// console.log(tuimg)
									// this.img.push(tuimg)
									// console.log(this.img)
									this.video = tuimg
				        },
				      });
				    }
				   });
			},
			goback(){
				uni.navigateBack({
					delta:1
				})
			},
			shoufei(flag){
				if(this.ishow =!this.ishow){
					this.is_sf = 1
				}else{
					this.is_sf = 0
				}
			},
			change_Img() {
			let token = uni.getStorageSync("token")
			   uni.chooseImage({
			    success:(res)=> {
					console.log(res)
			     const tempFilePaths = res.tempFilePaths;
					 console.log(res.tempFilePaths)
			       uni.uploadFile({
			        url: this.G_base + '/api/upload/image',
			        filePath: res.tempFilePaths[0],
			        name: 'file' ,
			        method:'post',
			        header: {
			         'Authori-zation': 'Bearer ' +token
			       },
			        success:(e)=> {
								console.log(e.data)
								let data = e.data;
								let s = JSON.parse(data);
								let tuimg = s.data.url
								// console.log( this.touxiang_Img)
								this.img.push(tuimg)
								console.log(this.img)
			        },
			      });
			    }
			   });
			  },
			fabu(){
			  let token = uni.getStorageSync("token")
				
				uni.request({
				    url: this.G_base+'/api/user/add_dynamic',
						method:"POST",
						data:{
							content:this.content,
							img:this.img.toString(),
							is_sf:this.is_sf,
							money:this.money,
							vedio:this.video,
						},
				    header: {
				      'content-type':'application/x-www-form-urlencoded' ,
							'Authori-zation': 'Bearer ' + token
				    },
				    success: (res) => {
							console.log(res)
							uni.navigateBack({
								
							})
				    },
						fail: (err) => {
							console.log(err)
						}
				});
			},
		}
	}
</script>

<style>
	.twofabuimages .one{
		margin-top: 50%;
		display: flex;
		transform: translateY(-50%);
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.twofabuimages{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.fabucontent{
		width: 90%;
		margin: 0 5%;
		
	}
.topheight{
margin-top: 35px;	
display: flex;
align-items: center;
}
.btnfabu{
	margin-top: 20%;
	margin-left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 180px;
	height: 50px;
	color: #FFFFFF;
			background: -webkit-linear-gradient(left, #a00000, #e10004, #a00000);
	line-height: 20px;
	border-radius: 40px;
	text-align: center;
}
</style>
